import React, { useState } from 'react'
import { EyeOutlined } from '@ant-design/icons'
import img1 from '../../../assets/a2.webp'
// import './animation.css'
const Index: React.FC = () => {
    const [Animg, setAnimg] = useState(false)
    return (
        <div className='animation-Box' onMouseEnter={() => { setAnimg(true) }} onMouseLeave={() => { setAnimg(false) }}>
            <div className='animation-Top'>
                <img style={{ width: '200px', height: '1300px' }} src={img1} alt="" />
            </div>
            <div className='animation-Bottom'>
                {
                    Animg ? <p style={{ width: '100%', height: '30px', display: 'flex', paddingLeft: '10px', paddingRight: '10px', marginTop: '10px', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                        <h4 style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>国庆快乐</h4>
                        <span style={{ color: '#999999' }}><EyeOutlined />520</span>
                    </p> : <h4 style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', paddingLeft: '10px', paddingTop: '10px', marginTop: '5px' }}>简约风国庆放假通知手机海报</h4>
                }
            </div>
        </div>
    )
}

export default Index